<template>
	<div class="bg-weight" >
		<div class="top marleft-10 ">
			<p class="fs-18 padtop-15 ">充值/余额</p>
			<hr class="border-bottom">
			<div class='accountInfo' >
				<p class="fs-16 marleft-20">充值账号:</p>
				<p class="fs-16 marleft-20" style="color: coral">{{userName}}</p>
				<p class="fs-16 marleft-20 ">当前余额:</p>
				<p class="fs-16 marleft-20" style="color: coral">{{balance}}元</p>
			</div>
			<div class="mar-top20">
				<p class="fs-16">充值金额(元):</p>
				<div class= "mar-top20 choice-div">
					<div v-for="(item,index) in [100,200,500,1000]" :key="index">
						<span class="item" :class="charge == index ? 'charge' : ''" @click="activeItem(index)">{{item}}</span>
					</div>
					<div key= '4'>
						<span class="item" :class="charge == 4 ? 'charge' : ''" @click="activeItem(4)">
							<p v-if="charge != 4">自定义金额</p>
							<input  v-if="charge == 4" class="input-s"  placeholder="金额" />
						</span>
					</div>
				</div>
			</div>
			<div class="mar-top20">
				<p class="fs-16">支付方式:</p>
				<div class= "mar-top20 choice-div">
					<span class="pay-type" style="display:inline-block;">
						<input type="radio" name="pay_type" value="alipay" id="pay_type_alipay">
						<label style="width: 160px;height:70px;border-width: 2px;" for="pay_type_alipay">
							<img style="width: 80%;margin-top: 10px;" src="../../static/img/finance/icon-accs.png">
						</label>
						<input type="radio" name="pay_type" value="zhuan" id="pay_type_zhuan">
						<label style="width: 160px;height:70px;border-width: 2px;" for="pay_type_zhuan">
							<img style="width: 80%;margin-top: 10px;" src="../../static/img/finance/contrary.png">
						</label>
					</span>
				</div>
			</div>
			
			<canvas id="qr"></canvas>
			<div class="mt20 bg-theme fz14 c-999 p20">
				<p class="mb10">温馨提示：</p>
				<p class="mb20">尊敬的口号帮用户您好，为了避免您误充值带来业务上的不便，请充值前查看相关业务的充值金额限制。</p>
				<p class="mb10" style="color: red;">1、发布违法违规稿件会直接封号不退款！</p>
				<p class="mb10">2、每次充值最低充值金额为<span class="c-f2752e">1</span>元</p>
				<p class="mb10">3、订单支付都以余额支付，已下订单并未支付可以到待执行订单进行支付处理。</p>
				<p>请充值前仔细了解，如有疑问，可先咨询客服人员，以免充值失误。</p>
			</div>
		</div>
	</div>

</template>

<script>
	export default {
		created (){
			this.showBalance();
		},
		data() {
			return {
				userName : 'chenjw',
				balance : 1.00,
				charge : 0,
				balance : 0 ,
				
			}
		},
		methods:{
			activeItem(index){
				this.charge = index;
			},
			showBalance(){
				this.$api.user.findJccmUserById().then(res=>{
					this.userName = res.data.userName;
					this.balance = res.data.userBalance;
				});
				
			}
		}
	}
</script>

<style>




body > .el-container {
	margin-bottom: 40px;
}

.fs-18 {
	font-size: 18px;
	color: black;
}

.fs-16 {
	font-size: 16px;
	color: black;
}

.bg-weight {
	background-color: white;
}

.top {
/* 	height: 100px; */
}	

.marleft-10 {
	margin-left: 10px ;
}

.marleft-20 {
	margin-left: 20px ;
}


.padtop-15 {
	padding-top: 15px;
}
.border-bottom {
	width: 99%;
	margin: auto;
	border-bottom: 1px solid #e0e0e0 ;
	background-color: #FFFFFF;
}

.accountInfo {
	height: 60px;
	width: 99%;
	margin: auto;
	background-color: #f5f7fa;
	display: flex;
	flex-direction: row ;
	line-height: 60px;
	
}

.mar-top20{
	margin-top: 20px;
}

.choice-div {
	display: flex;
	flex-direction: row;
	
}

.item {
	width: 150px;
	height: 120px;
	border: 1px solid rgb(221, 221, 221);
	border-radius: 8px;
	box-sizing: border-box;
	text-align: center;
	font-size: 26px;
	line-height: 120px;
	margin-left: 20px ;
}

.charge {
	border: 2px solid #28bc05;
	background: url("../../static/img/finance/tips.png") no-repeat right bottom;
}

.input-s {
	text-align:center;
	width: 110px;
	height: 100px;
	line-height: 100px;
	margin: auto;
	color : #666;
}
</style>
